<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<button onclick="getProducts1()">获取商品列表1</button>
<button onclick="getProducts2()">获取商品列表2</button>
<button onclick="cancelReq()">取消请求</button>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:4000/';
    // 请求拦截器
    axios.interceptors.request.use((config)=>{
        // 在准备发请求之前 取消未完成的请求
        if(typeof cancel==='function'){
            cancel('取消请求')
        }
        // 添加cancelToken的配置
        config.cancelToken=new axios.CancelToken(function executor(c) {
            // 保存取消函数 用于之后可能取消当前请求
            cancel=c
        })
        return config
    })
    // 响应拦截器
    axios.interceptors.response.use(
        response=>{
            cancel=null
            return response
        },
        error=>{
            if (axios.isCancel(error)){ // 取消请求的错误
                console.log('请求取消的错误',error.message)
                // 中断promise连接
                return new Promise(()=>{})
            }else { // 请求出错了
                cancel=null
                // console.log('请求1失败了',error.message,error)
                // 将错误向下传递
                // throw error
                return Promise.reject(error)
            }
        }
    )
    // 用户保存取消请求的函数
    let cancel
    function getProducts1() {
        axios({
            url:'/products1'
        })
        .then(
            response=>{
                console.log('请求1成功了', response.data)
            },
            error=>{ // 只用处理请求失败 取消请求错误不用处理
                console.log('请求1失败了',error.message,error)
            }
        )
    }
    function getProducts2() {
        axios({
            url:'/products2'
        })
        .then(
            response=>{
                console.log('请求2成功了', response.data)
            },
            error=>{
                console.log('请求2失败了',error.message,error)
            }
        )
    }
    function cancelReq() {
        // 执行取消请求函数
        if(typeof cancel==='function'){
            cancel('强制取消请求')
        }else {
            console.log('没有可取消的请求')
        }

    }
</script>
</body>
</html>
